<template>
  <div class="title">
    <h class="start">回收站</h>
    <div class="search">
      <i class="iconfont icon-sousuo"></i>
      <p>搜索</p>
    </div>
  </div>
  <div style="margin-left: 20px">
    <el-table :data="tableData" style="width: 96%">
      <el-table-column prop="name" label="名称" width="600" />
      <el-table-column prop="date" label="删除时间" sortable width="250" />

      <el-table-column label="操作">
        <template #default>
          <el-button link type="primary" size="small" @click="handleBack">
            恢复
          </el-button>
          <el-button link type="primary" size="small" @click="handleDelete"
            >彻底删除</el-button
          >
        </template>
      </el-table-column></el-table
    >
  </div>

  <!-- 恢复对话框 -->
  <el-dialog v-model="backVisible" title="提示" width="500">
    <span>确定要恢复文件到原先位置吗？ </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="backVisible = false">取消</el-button>
        <el-button type="primary" @click="backVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!-- 彻底删除对话框 -->
  <el-dialog v-model="deleteVisible" title="提示" width="500">
    <span>确定要彻底删除此文件吗？ </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="deleteVisible = false">取消</el-button>
        <el-button type="primary" @click="deleteVisible = false">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref } from "vue";
// 表格数据
const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
  },
  {
    date: "2016-05-02",
    name: "Tom",
  },
  {
    date: "2016-05-04",
    name: "Tom",
  },
  {
    date: "2016-05-01",
    name: "Tom",
  },
];
// 恢复对话框
const backVisible = ref(false);

// 点击弹出恢复对话框
const handleBack = () => {
  backVisible.value = true;
};

// 恢复对话框
const deleteVisible = ref(false);

// 点击弹出彻底删除对话框
const handleDelete = () => {
  deleteVisible.value = true;
};
</script>

<style scoped>
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  padding-top: 5px;
}

.start {
  font-size: 21px;
  margin-left: 1.2vw;
  display: flex;
}

.search {
  box-sizing: border-box;
  margin: 8px 30px;
  height: 32px;
  width: 260px;
  border-radius: 6px;
  background-color: #eee;
  display: flex;
  align-items: center;
  padding: 0 10px;
  color: #aaa;
  font-size: 14px;
}

.icon-sousuo {
  margin-right: 5px;
}
</style>
